<template>
  <div id="home">
    <van-nav-bar>
      <template #left>
        <h3>系统首页</h3>
      </template>
      <template #right>
        <van-icon name="chat-o" size="24" badge="9" />
      </template>
    </van-nav-bar>

    <!-- 广告位 -->
    <van-notice-bar
      color="#f60"
      background="#ffffff"
      left-icon="volume-o"
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
      mode="link"/>

    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="img in imgList" :key="img.id" @click="toCourseHandle(img.id)">
        <img style="width: 100%" :src="img.url" />
      </van-swipe-item>
    </van-swipe>

    <!-- 科目选择 -->
    <van-cell :title="subjectDefaultName" is-link @click="subjectShowPopup = true" />
    <van-popup v-model:show="subjectShowPopup" position="right" style="text-align: left"  :style="{ width: '70%', height: '100%'}">
      <van-cell-group v-for="subject in subjectList" :key="subject.id" :title="subject.name" inset>
        <van-space :size="20" align="start" wrap>
          <van-tag round type="primary" size="large"  v-for="item in subject.children" :key="item.id" @click="subjectHandle(item)">{{item.name}}</van-tag>
        </van-space>
      </van-cell-group>
    </van-popup>

    <!-- 考试类型 -->
    <van-grid :column-num="2" :gutter="5" clickable>
      <van-grid-item v-for="menu in menuList" @click="toMenuHandle(menu)">
        <div slot="default" class="content-box">
          <van-icon class-prefix="my-icon" :name="menu.icon"></van-icon>
          <div class="right">
            <div class="title">{{menu.title}}</div>
            <div class="desc">{{menu.desc}}</div>
          </div>
        </div>
      </van-grid-item>
    </van-grid>

    <!-- 客服信息 -->
    <van-floating-bubble
      axis="xy"
      icon="chat"
      magnetic="x"
      @offset-change="onOffsetChange"
    />
  </div>

  <TabBar />
</template>
<script>
import { useRouter } from "vue-router";
import TabBar from "@/components/layout/tab-bar";
import { onMounted,reactive, toRefs, inject  } from "vue"
import { showToast, showFailToast } from 'vant';
import http from "@/utils/http";
export default {
  components: {
    TabBar
  },
  setup() {
    const router = useRouter();
    const reload = inject("reload");
    const state = reactive({
      subjectShowPopup: false,
      subjectList: {},
      subjectDefaultId: localStorage.subjectId,
      subjectDefaultPids: localStorage.subjectPids,
      subjectDefaultName: localStorage.subjectName,
      loading: false,
      imgList : [
        {id: "1", url: "https://bearwind-education.oss-cn-hangzhou.aliyuncs.com/course/mmexport1624930494824.jpg"},
        {id: "2", url: "https://bearwind-education.oss-cn-hangzhou.aliyuncs.com/course/mmexport1624930541055.jpg"},
        {id: "3", url: "https://bearwind-education.oss-cn-hangzhou.aliyuncs.com/course/mmexport1624930364055.jpg"},
      ],
      menuList : [
        { name:'simulation', title: "模拟考试", url: "/simulation", desc:"仿真考试练习", icon: 'jiudian1'},
        { name:'combination', title: "组卷练习", url: "/combination",desc:"超大题库全面练习", icon: 'qianggoumiaosha1'},
        { name:'chapter', title: "章节练习", url: "/chapter", desc:"难度递进针对练习", icon: 'lipin1'},
        { name:'collection', title: "收藏题库", url: "/collection", desc:"定向收藏试题", icon: 'qiandan11'},
        { name:'wrong', title: "错题重练", url: "/wrong", desc:"错题重练加深印象", icon: 'qianbao1'},
        { name:'material', title: "学习资料", url: "/material", desc:"提前做好考试准备", icon: 'tuandui1'},
        { name:'test', title: "每日一练", url: "/test", desc:"提前做好考试准备", icon: 'canyin1'},
        { name:'test', title: "成绩查询", url: "/exam-record", desc:"实时掌握考试成绩", icon: 'shucai1'}
      ],
    })

    onMounted(()=>{
      http.get('/education/subject/list').then(({ data: res})=>{
        if (res.code !==0){
          return showFailToast(res.msg)
        }
        state.subjectList = res.data
      })
    })

    const toCourseHandle = (value) =>{
      console.log(value)
    }

    const subjectHandle = (item) => {
      localStorage.setItem("subjectId", item.id)
      localStorage.setItem("subjectPids", item.pids)
      localStorage.setItem("subjectName", item.name)
      state.subjectShowPopup = false
      reload();
    }

    const toMenuHandle= (menu) => {
      router.push({
        path: menu.name,
        params: {
          id: state.subjectDefaultId,
          pids: state.subjectDefaultPids
        }
      })
    }

    const onOffsetChange = (offset) => {
      showToast(`x: ${offset.x.toFixed(0)}, y: ${offset.y.toFixed(0)}`);
    };

    return {
      ...toRefs(state),
      subjectHandle,
      toCourseHandle,
      toMenuHandle,
      onOffsetChange
    }
  },
}
</script>

<style lang="less" scoped>
#home{
  text-align: center;
}

/deep/.van-grid-item .van-grid-item__content {
  padding: 0.5rem;
}

.content-box {
  display: flex;
  width: 100%;
  text-align: left;
  img {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    margin: 0 auto;
  }
  .right {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-left: 12px;
    .title {
      font-size: 16px;
      font-weight: bold;
      padding-top: 5px;
      color: #333333;
    }
    .desc {
      font-size: 12px;
      color: #969696;
    }
  }
}
</style>
